
<style  lang="stylus" scoped>
  /* 商品信息 */
  .msg-top{
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(238,238,238,1);
  }
  /* 图片盒子 */
  .msg-top>div:nth-child(1){
    width: 73px;height: 73px;
    /* box-sizing: border-box; */
  }
  /* 图片 */
  .msg-top>div:nth-child(1)>img{
    width: 73px;height: 100%;
  }
  /* 右侧盒子 */
  .msg-top-text{
    padding-left: 12px;
  }
  /* 右侧第一个div */
  .msg-top-text div:nth-child(1){
    font-size:14px;
    font-family:'SourceHanSansCN-Medium';
    font-weight:600;
    color:rgba(25,25,25,1);
    line-height:18px;
  }
  .msg-top-text div:nth-child(2){
    
  }
  .goods-num>div:nth-child(1){
      font-size:16px;
      font-family:'SourceHanSansCN-Medium';
      font-weight:600;
      color:rgba(255,161,176,1);
    }
  .goods-num>div:nth-child(2){
      font-size:12px;
      font-family:'SourceHanSansCN-Regular';
      font-weight:400;
      color:rgba(160,154,155,1);
    }
  .msg-box{
    background:  rgba(255,255,255,1);
    padding:20px 15px 15px 15px;
  }
  .msg-cen{
    padding: 15px 0;
    border-bottom: 1px solid rgba(238,238,238,1);
  }
  .msg-cen>div:nth-child(1){
    font-size:14px;
    font-family:'SourceHanSansCN-Regular';
    font-weight:400;
    color:rgba(65,61,61,1);
  }
  .add-content{
    font-size:12px;
    font-family:'SourceHanSansCN-Regular';
    font-weight:400;
    color:rgba(102,99,99,1);
  }
  .add-content p{
    margin-top: 3px;;
  }
  .msg-bot{
    margin: 15px 0;

  }
  .msg-bot div:nth-child(1){
    font-size:14px;
    font-family:'SourceHanSansCN-Regular';
    font-weight:400;
    color:rgba(65,61,61,1);
    }
  .num-box{
    span{
      width: 24px;height: 24px;display:block;border-radius:50%;
    }
    img{
      width: 24px;height: 24px;
    }
    span:nth-child(2){
      display: inline-block;
      width: 90px;height: 24px;
      border-radius:12px;
      background:rgba(255,137,156,0.2);
      /* color:rgba(255,161,176,1); */
      text-align: center;line-height: 24px;
      margin: 0 -20px;
    }
  }
  /* 点击按钮放大 */
  .zoom:active{
    transform: scale(1.5,1.5)
  }
  .price-total{
    font-size:16px;
    font-family:'SourceHanSansCN-Medium';
    font-weight:600;
    color:rgba(255,161,176,1);
    background:rgba(255,255,255,1);
    line-height: 50px;
    padding-left: 20px;
  }
  .add{
    font-size:14px;
    font-family:SourceHanSansCN-Medium;
    font-weight:600;
    color:rgba(255,255,255,1);
    background:rgba(255,161,176,1);
    line-height: 50px;
  }
  .min-box{
    font-size:14px;
    font-family:'SourceHanSansCN-Regular';
    font-weight:400;
    color:rgba(255,161,176,1);
  }
  .define-btn{
    margin: 25px;
    background:rgba(255,137,156,1);
    font-size:16px;
    font-family:'SourceHanSansCN-Medium';
    font-weight:600;
    color:rgba(255,255,255,1);
    line-height:35px;
    height:41px;
    text-align: center;
  }
  .mask{
    position:fixed;left: 0;bottom: 0;width: 100%;height:50px;background:rgba(255,255,255,1);
  }
  .shortage{
    color:rgba(255,137,156,1);
  }
  .kucun{
    font-size:12px !important;
    font-family:'SourceHanSansCN-Regular';
    font-weight:400 !important;
    color:rgba(160,154,155,1) !important;
  }
  .team-window{
    background: rgba(255,255,255,1);
    position: fixed;
    left: 0;
    bottom: 0;
    width:100%;
  }
</style>
<style lang="stylus" scoped>
.input{
  width: 40px;
  text-align: center;
  background: rgba(255,137,156,0.2);
  opacity:0.2;
  color:#000;
}

/* .bottom{
      position: fixed;left: 0;bottom: 0;
      background:rgba(255,255,255,1);
      display: flex;
      width: 100%;
      height:50px;
      align-items: center;
      line-height: 50px;
      z-index: 200;
    } */
    /* .bottom>div:nth-child(1){
      flex:1;
      font-size:14px;
      font-family:'SourceHanSansCN-Medium';
      font-weight:500;
      color:rgba(255,161,176,1);
      padding-left: 20px;
    } */
    /* .bottom>div:nth-child(1){
      flex:2;
      font-size:16px;
      font-family:'SourceHanSansCN-Medium';
      font-weight:500;
      color:rgba(255,161,176,1);
      text-align: left;
      padding-left: 10px;
      
    }
    .bottom>div:nth-child(2){
      width: 125px;
      background:rgba(255,161,176,1);
      text-align: center
    } */
        .selectedImg{
      width: 17px;height: 17px;
      margin-top: 30px;
    }
    .num-box{
    span{
      width: 24px;height: 24px;display:block;border-radius:50%;
    }
    img{
      width: 24px;height: 24px;
    }
    span:nth-child(2){
      display: inline-block;
      width: 90px;height: 24px;
      border-radius:12px;
      background:rgba(255,137,156,0.2);
      text-align: center;line-height: 24px;
      margin: 0 -20px;
    }
  }
  .input{
    width: 40px;
    text-align: center;
    background: rgba(255,137,156,0.2);
    opacity:0.2;
    color:#000;
  }
  .topay{
      font-size:14px;
      font-family:'SourceHanSansCN-Medium';
      font-weight:600;
      color:rgba(255,255,255,1);
    }
</style>

<!-- 订单区，面膜订单，填写订单信息页面 -->
<template>
  <div class="box">
      <div class="msg-box">
        <!-- {{goodslist || JSON}} -->
        <!-- 商品信息 -->
        <div class="msg-top flex-display" v-for="(item,index) in goodslist" :key = 'index' style="padding:10px;">
        <!-- 图片 -->
        <div>
            <img :src="item?item.thumbnail:''" >
        </div>
        <!-- 右侧 -->
        <div class="msg-top-text flex-display" style="flex-direction:column;justify-content:space-between;width: 100%;">
          <!-- 标题 -->
          <div>
            <p class="text-overflow-1">
                {{item?item.title:''}}
            </p>
          </div>
          <!-- 价格，数量 -->
          <div  class="goods-num flex-display" style="justify-content:space-between; ">
            <div>
              <span v-if="currentTabbar == '面膜区'" style="font-size: 12px;">¥</span>
              <span v-else><img src="../../../static/new/huiyuanjifen.png" style="width: 26px;height:23px;margin-bottom: 3px;padding: 0;"></span>
              <span>
                  {{item?item.core:''}}
              </span>
            </div>
            <div>数量：{{item?item.goods_counts:''}}</div> 
          </div>
        </div>
        </div>
        <!-- 送货信息 -->
        <div 
        class="msg-cen" 
        @click="fnSelectAddress"
        v-if="type == 'deliver'"
        >
          <div>收货地址</div>
          <div class="flex-display" style="justify-content:space-between;">
            <div class="add-content">
                <p>
                  {{address?address.name:'收件人'}}
                  {{address?address.number:'13888888888'}}
                </p>
                <p >
                  <img src="../../../static/new/icon_location.png" alt="" style="width: 8px;height:10px;margin: 0 3px 3px 0; ">
                  {{address?address.address[0]:'广东省'}}
                  {{address?address.address[1]:'广州市'}}
                  {{address?address.address[2]:'白云区'}}
                  {{address?address.detail:'智造广场'}}
                </p>
            </div>
            <div>
              <img src="../../../static/new/icon_arrows.png" style="width: 22px;height: 22px;">
            </div>
          </div>
        </div>

        <!-- 转让信息 -->
        <div  class="flex-row-between" style="margin: 20px 0;" @click="fnChoosePerson"
        v-if="type == 'transfer'"
          >
          <div>
                请选择接收人
          </div>
          <div>
            <span>
                <input type="text" :placeholder="assignor?assignor.nickname:'点击选择接收人'" style="width: 200px;text-align: right;vertical-align: middle;">
            </span>
            <img src="../../../static/new/icon_arrows.png" alt="" style="width:22px;height:22px;">
          </div>
        </div>


        <!-- <div class="bottom">
            <div>
              <img src="../../../static/new/huiyuanjifen.png" style="width: 26px;height:23px;margin-bottom: 0px;padding: 0;">
              <span>{{total.toFixed(2)}}</span>
            </div>
            <div @click="fnToConfirm" class="topay">
              确认进货（{{goodsNum}}）
            </div>
        </div> -->

        <div class="bottom">
            <div class="price-total">
              <img src="../../../static/new/huiyuanjifen.png" style="width: 26px;height:23px;margin-bottom: 0px;padding: 0;">
              <span>{{total.toFixed(2)}}</span>
            </div>

            <div @click="fnToConfirm('code')" class="code-in"  v-if="type == 'stock'">
              积分进货
            </div>
            <div @click="fnToConfirm" class="check-in" v-if="type == 'stock'">
              客服审核进货
            </div>

            <div @click="fnToConfirm" class="btn-in" v-if="type == 'deliver'">
              确认出货（{{goodsNum}}）
            </div>

            <div @click="fnToConfirm" class="btn-in" v-if="type == 'transfer'">
              确认转让（{{goodsNum}}）
            </div>

        </div>

      </div>
  </div>
</div>


  </div>
</template>

<style  lang="stylus" scoped>


.bottom{
      position: fixed;left: 0;bottom: 0;
      background:rgba(255,255,255,1);
      display: flex;
      width: 100%;
      height:50px;
      align-items: center;
      line-height: 50px;
      z-index: 200;
      .price-total{
          flex:1;
          font-size:14px;
          font-family:'SourceHanSansCN-Medium';
          font-weight:500;
          color:rgba(255,161,176,1);
          padding-left: 20px;
      }
      .btn-in{
        width: 125px;
        background:rgba(255,161,176,1);
        text-align: center;
        font-size:14px;
        font-family:'SourceHanSansCN-Medium';
        font-weight:600;
        color:rgba(255,255,255,1);
      }
      .code-in{
        flex:1;
        background:rgba(255,194,204,1);
        text-align: center;
        font-size:14px;
        font-family:'SourceHanSansCN-Medium';
        font-weight:600;
        color:rgba(255,255,255,1);
      }
      .check-in{
        flex:1;
        background:rgba(255,161,176,1);
        text-align: center;
        font-size:14px;
        font-family:'SourceHanSansCN-Medium';
        font-weight:600;
        color:rgba(255,255,255,1);
      }
    }

    /* .bottom>div:nth-child(1){
      flex:2;
      font-size:16px;
      font-family:'SourceHanSansCN-Medium';
      font-weight:500;
      color:rgba(255,161,176,1);
      text-align: left;
      padding-left: 10px;
      
    }
    .bottom>div:nth-child(2){
      width: 125px;
      background:rgba(255,161,176,1);
      text-align: center
    } */
</style>

<script>
    import axios from "axios";
    import { Navbar, TabItem, Cell, Toast, Indicator ,Progress,Swipe, SwipeItem,Picker } from "mint-ui";
    import ComHeader from '@/common/ComHeader' 
    // import 'swiper/dist/css/swiper.css';
    import api from "@/fetch/api";
    import { mapState,mapGetters,mapMutations } from "vuex";
    export default {
      name: "order_write",
      components: {
        ComHeader,
        Navbar,
        TabItem,
        Cell,
        Toast,
        Indicator,
        Progress,
        Swipe, SwipeItem,Picker 
      },
      data() {
        return {
          // 用户信息
          wxUserInfo:this.$store.state.userInfo,
          goods_id:10,
          goods_index:0,
          // 商品信息
          gooodsMsg:[],
          detailList:[],
          num:1,
          isplus:true,
          isminus:true,
          plusDis:'../../../static/new/but_plus_dis.png',
          plusUse:'../../../static/new/but_plus_usable.png',
          minusDis :'../../../static/new/but_subtract_dis.png',
          minusUse:'../../../static/new/but_subtract_usable.png',
          minNun:0,
          priceTotal:'',
          currentTabbar:this.$store.state.currentTabbar,
          currentStockTabbar:this.$store.state.currentStockTabbar,
          settlement:this.$store.state.settlement,
          // 公司库存
          companyinventory:0,
          // 个人库存
          personalinventory:0,
          address:{"name":"赛小娜","number":"13888888888","address":["广东省","广州市","白云区"],"detail":"智造广场"},
          teamList:[],
          type:this.getUrlParams('type')?this.getUrlParams('type'):0,
          arr:this.getlocalStorage('goodsarr'),
          goodslist:[],
          goodsNum:0,
          total:0,
          assignor:'',
        };
      },
      created() {

        // console.log(66666)
        // console.log(this.wxUserInfo)

        if(this.wxUserInfo == ''){
          this.wxUserInfo = this.getlocalStorage('wxUserInfo');
        }
        // console.log(this.wxUserInfo)
        // console.log(77777)

        console.log('settlement',this.settlement)
        this.num = this.minNun

        // this.currentTabbar = this.$store.state.currentTabbar
        // this.currentStockTabbar = this.$store.state.currentStockTabbar
        // this.settlement = this.$store.state.settlement
        console.log(444,this.currentTabbar,this.currentStockTabbar,this.settlement)
        console.log(this.slots)
        // this.teamList = ['1', '2', '3', '4', '5', '6']
        // this.slots[0].values = this.teamList
        if(this.getlocalStorage('UserAddress')){
          this.address = this.getlocalStorage('UserAddress')
        }
        this.fnGetGoodsInfo()

      },
      mounted() {
        // 判断转让人
        this.assignor = this.getlocalStorage('assignor')
        window.localStorage.removeItem('assignor')
          // this.wxUserInfo = this.$store.state.userInfo
        

        this.goods_id = this.getUrlParams('goods_id')
          console.log('id',this.goods_id)
        this.goods_index = this.getUrlParams('goods_index')
          console.log('index',this.goods_index)
          // 获取商品信息 
        // this.getTeam()

      },
      methods: {
        fnToConfirm(sendnum){
          console.log('000')

          // 进货
          if(this.type == 'stock'){

            // 拼接数组
            var arr = []
            for(var i = 0 ; i<this.goodslist.length ; i++){
              arr.push({
                "goods_id":this.goodslist[i].goods_id,
                "counts":this.goodslist[i].goods_counts,
                "order_code":this.goodslist[i].order_code,
              })
            }
            console.log(arr)


            // 积分进货
            if(sendnum == 'code'){
              console.log(789789)
              const params1 = {
                userid: this.wxUserInfo.id,
                goodsinfo: JSON.stringify(arr)
              };
              api.usercore(params1).catch(res => {
                console.log(123,res)
                Toast(res.data.msg)
                if(res.data.code == 1 ){
                  this.$router.go(-1)
                }
              });


            }else{
              // 审核进货
              const params1 = {
                userid: this.wxUserInfo.id,
                goodsinfo: JSON.stringify(arr)
              };
              api.addinventory(params1).catch(res => {
                console.log(456,res)
                Toast(res.data.msg)
                if(res.data.code == 1 ){
                  this.$router.go(-1)
                }
              });
            }
            
            
          }else if(this.type == 'deliver'){
            if(this.address.name == '赛小娜'){
              Toast("请输入地址")
              return
            }
            // 出货

            // 拼接数组
            var arr = []
            for(var i = 0 ; i<this.goodslist.length ; i++){
              arr.push({
                "goods_id":this.goodslist[i].goods_id,
                "counts":this.goodslist[i].goods_counts,
                "order_code":this.goodslist[i].order_code,
              })
            }
            console.log(arr)

            const params2 = {
              userid: this.wxUserInfo.id,
              goodsinfo: JSON.stringify(arr),
              deliver_name:this.address.name,
              phone:this.address.number,
              province:this.address.address[0],
              city:this.address.address[1],
              quxian:this.address.address[2],
              address:this.address.detail,
            };
            api.delivergoods(params2).catch(res => {
              console.log(123,res)
              Toast(res.data.msg)
              if(res.data.code == 1 ){
                  this.$router.go(-1)
                }
            });



          }else if(this.type == 'transfer'){
            // 转让
            // 拼接数组
            var arr = []
            for(var i = 0 ; i<this.goodslist.length ; i++){
              arr.push({
                "goods_id":this.goodslist[i].goods_id,
                "counts":this.goodslist[i].goods_counts,
                "order_code":this.goodslist[i].order_code,
              })
            }
            console.log(arr)
            if(this.assignor == null){
              Toast("请选择接收人")
              return
            }
            // console.log(this.assignor.userid)
            // if()

            const params1 = {
              userid: this.wxUserInfo.id,
              goodsinfo: JSON.stringify(arr),
              deliver_id:this.assignor.userid,
            };
            api.transfergoods(params1).catch(res => {
              console.log(123,res)
              Toast(res.data.msg)
              if(res.data.code == 1 ){
                this.$router.go(-1)
              }
            });






          }

        },
        
        /**
         * @desc    选择转让人，打开选框
         * @author  ye
         * @param   none
       */
        fnChoosePerson(){
          // console.log(456)
          this.$router.push({
            path: '/chooseperson'
          });
        },

        /**
         * @desc    确定按钮，只有个人的出货，还有个人的转让时，会出现按钮
         * @author  ye
         * @param   none
       */
        // 
        define(){
          if(this.settlement == '个人出货'){
            var arr = []
            arr.push({"goods_id":this.goods_id,"counts":this.num})
            // console.log('个人出货')
            const params6 = {
              userid: this.wxUserInfo.id,
              // 商品信息
              goodsinfo:JSON.stringify(arr),
              deliver_name:this.address.name,
              province:this.address.address[0],
              city:this.address.address[1],
              quxian:this.address.address[2],
              phone:this.address.number,
              address:this.address.detail,
            };
            api.delivergoods(params6).catch(res => {
              console.log('个人出货', res);
              // 成功的返回
              if(res.data.code ==1 ){
                Toast({
                  message: res.data.msg,
                  duration: 1000
                });
                this.$store.commit('changeIsShowAnimation',true)
                setTimeout(() => {
                  // 返回上一个界面
                  this.$router.go(-1)
                }, 2000);
              }else{
              // 失败的返回
                Toast({
                  message: res.data.msg,
                  duration: 1000
                });
              }

            });



          }else if(this.settlement == '个人转让'){
            console.log('个人转让')
            if(this.name.userid == 111111){
                Toast({
                  message: '请选择接收人',
                  duration: 3000
                });
            }else{
                console.log(this.wxUserInfo.id,this.goods_id,this.num,this.name.userid)
                const params7 = {
                  userid:this.wxUserInfo.id,
                  goods_id:this.goods_id,
                  goods_counts:this.num,
                  deliver_id:this.name.userid
                };
                // 获取团队列表
                api.transfergoods(params7).catch(res => {
                  console.log('个人转让', res);
                  if(res.data.code){
                    this.$store.commit('changeIsShowAnimation',true)
                    // 如果成功，则返回到详情页
                    setTimeout(() => {
                      this.$router.go(-1)                      
                    }, 2000);
                  }else{

                  }
                  Toast({
                    message: res.data.msg,
                    duration: 3000
                  });

                });
            }
          }
        },
        
        /**
         * @desc    打开选择地址
         * @author  ye
         * @param   none
       */
        fnSelectAddress() {
          this.$router.push("/add_address");
        },

        /**
         * @desc    获取商品信息
         * @author  ye
         * @param   none
       */
        fnGetGoodsInfo(){
          this.goodslist = []
          this.goodsNum = 0
          this.total = 0
          // console.log(888888)
            const params6 = {
              userid: this.wxUserInfo.id,
              type:this.type
            };
            api.getcart(params6).catch(res => {
              // console.log('个人出货', res);
              // console.log('this.arr',this.arr)
              // console.log('this.arr',this.arr.length)
              var arr = []
              for(let i = 0 ;i<this.arr.length ; i++){
                // console.log(this.arr[i])
                // console.log(Number(this.arr[i]))
                // console.log(res.data.results[Number(this.arr[i])])
                // this.goodslist.push(res.data.results[Number(this.arr[i])])
                // this.goodslist.push(res.data.results[Number(this.arr[i])])
                arr.push(res.data.results[Number(this.arr[i])])
                this.goodsNum += arr[arr.length-1].goods_counts
                this.total += arr[arr.length-1].goods_counts *arr[arr.length-1].core


                // this.goodslist = [...this.goodslist, ... [res.data.results[Number(this.arr[i])]]]
              }
              this.goodslist = arr
              console.log(789,this.goodslist)
            });
        },

        
        /**
         * @desc    购买，包括公司进货，还有面膜购买
         * @author  ye
         * @param   {goods_id,goods_index},goods_id,商品的ID，goods_index，在数组中的索引值
       */
        fnToBuy(goods_id,goods_index){
            console.log(goods_id,goods_index)

            if(this.settlement == '面膜结算'){
              console.log('面膜结算')
              // 还没有API









            }else if(this.settlement == '公司进货'){
              console.log('公司进货')
              var goodsinfo = [{"goods_id":this.goods_id,"counts":this.num}]
              const params3 = {
                userid: this.wxUserInfo.id,
                goodsinfo:JSON.stringify(goodsinfo)
              };
              api.addinventory(params3).catch(res => {
                console.log('联创进货', res);
                if(res.data.code == 1){
                  // 打开动画
                  this.$store.commit('changeIsShowAnimation',true)
                }
                Toast({
                  message: res.data.msg,
                  duration: 3000
                });

              });
            }
            setTimeout(() => {
              // 返回上一个界面
              this.$router.go(-1)
            }, 2000);

        }
      },
    };
</script>
    
    
    